<template>
  <div class="container">
    <NavHeader :userProps="userInfo"></NavHeader>
    <!-- <Home></Home> -->
    <Loading v-if="isLoading" :infoText="'接口数据加载中'"></Loading>
    <!-- <Uploader
      action="/apixyz/upload"
      :beforeUpload="beforeUpload"
      :resetfileStatus="resetfileStatus"
      @fileUploaded="onFileUpload"
      @fileUploadedError="onFileUploadError"
    >
      <template #loading>
        <div class="spinner-border text-primary" role="status"></div>
      </template>
      <template #uploaded="dataProps">
        <img :src="dataProps.uploadedData.data.url" width="300" />
        <button class="btn btn-primary" @click.stop="deleteUpload">删除图片</button>
        <button class="btn btn-primary">重新上传</button>
      </template>
    </Uploader> -->
    <div class="content">
      <router-view></router-view>
    </div>
    <footer class="footer bg-light">
      <ul>
        <li>@2200</li>
        <li>天文</li>
        <li>地理</li>
      </ul>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, watch, ref } from 'vue';
import NavHeader from '@/components/NavHeader.vue';
import Loading from '@/components/Loading.vue';
import createMessage from '@/components/createMessage';

import { useStore } from 'vuex';
import { ResponseType, ImageProps } from '@/store/types';

export default defineComponent({
  components: {
    NavHeader,
    Loading
  },
  setup() {
    const store = useStore();
    const userInfo = computed(() => store.state.user);
    const error = computed(() => store.state.error);
    watch(
      () => error.value.status,
      () => {
        if (error.value.status && error.value.error) {
          createMessage(error.value.error, 'error');
        }
      }
    );
    // const isLoading = false;
    const isLoading = computed(() => store.state.isLoading);
    const beforeUpload = (file: File) => {
      const isJPG = file.type === 'image/jpeg';
      if (!isJPG) {
        createMessage('上传的文件不是jpg格式', 'error');
      }
      return isJPG;
    };
    const onFileUpload = (rawData: ResponseType<ImageProps>) => {
      console.log(rawData.data._id, 'image......');
      resetfileStatus.value = '';
      createMessage(`上传图片ID ${rawData.data._id}`, 'success');
    };
    const onFileUploadError = (error: ResponseType<null>) => {
      resetfileStatus.value = '';
      createMessage(`图片上传失败 ${error.error}`, 'error');
    };
    // const resetUpload = (e: Event) => {
    //   console.log('resetupload');
    // };
    const resetfileStatus = ref<string>('');
    const deleteUpload = () => {
      // 通过modal框点击二次确认
      console.log('deleteUpload', resetfileStatus.value);
      resetfileStatus.value = 'ready';
    };
    return { userInfo, isLoading, error, resetfileStatus, beforeUpload, onFileUpload, onFileUploadError, deleteUpload };
  }
});
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    margin-top: 18px;
  }
  .footer {
    margin-top: 1rem;
    padding: 1rem 1.5rem 2rem;
    ul {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      li {
        list-style: none;
      }
    }
  }
}
</style>
